import {
  View,
  Text,
  Swiper,
  SwiperItem,
  Image,
  Button,
} from "@tarojs/components";
import React from "react";
import { useState, useEffect } from "react";
import CardScroll from "../../components/index/card_scroll";
import CardScrollItem from "../../components/index/card_scroll_item";
import SearchBar from "../../components/common/search_bar";
import Taro from "@tarojs/taro";
import DefaultProfile from "../../images/common/logo.png";
import { getBanner, getArticles } from "../../services/api";
import "./index.scss";
import Tag from "../../components/common/tag";

const Discover = (props) => {
  const [swiperData, setSwiperData] = useState([]);
  const [userArticles, setUserArticles] = useState([]);
  const [officialArticles, setOfficialArticles] = useState([]);

  useEffect(() => {
    getBanner(2).then((res) => {
      const { result, type } = res;
      if (type == "success") {
        setSwiperData([...result]);
      }
    });
    getArticles(1, 5).then((res) => {
      const { result, type } = res;
      if (type == "success") {
        setUserArticles(result.items);
      }
    });
    getArticles(1, 5).then((res) => {
      const { result, type } = res;
      if (type == "success") {
        setOfficialArticles(result.items);
      }
    });
  }, []);

  const renderTags = (item) => {
    const tagStr = item.tag;
    if (tagStr) {
      const tags = tagStr.split("，");
      return (
        <View className="tags">
          {tags.map((tag) => (
            <Tag text={tag} />
          ))}
        </View>
      );
    }
    return (
      <View className="tags">
        <Tag text={"默认标签"} />
      </View>
    );
  };

  const handlerClickCreate = () => {
    Taro.navigateTo({ url: "article/create" });
  };

  const handlerClickItem = (id) => {
    console.log("click Item");
    Taro.navigateTo({ url: `article/detail?id=${id}` });
  };

  return (
    <View className="discover">
      <View className="header">
        <Swiper className="header-swiper">
          {swiperData.map((item) => {
            return (
              <SwiperItem>
                <Image className="header-img" src={item.img_url} />
              </SwiperItem>
            );
          })}
        </Swiper>
        <View className="search">
          <SearchBar />
        </View>
      </View>
      <View className="content">
        <CardScroll
          titleStyle={{
            color: "#000000",
            fontWeight: "400",
            fontSize: Taro.pxTransform(28),
          }}
          right={<Text style={{ color: "black" }}>全部 </Text>}
          title="达人推荐"
        >
          {userArticles.map((item) => (
            <CardScrollItem
              onClick={() => handlerClickItem(item.id)}
              title={item.title}
              url={item.imgurl}
              footer={
                <View>
                  <Image className="profile" src={item.avatar} />
                  <Text className="username">{item.createUserName}</Text>
                </View>
              }
              other={renderTags(item)}
            />
          ))}
        </CardScroll>
        <CardScroll
          titleStyle={{
            color: "#000000",
            fontWeight: "400",
            fontSize: Taro.pxTransform(28),
          }}
          right={<Text style={{ color: "black" }}>全部 </Text>}
          title="官方推荐"
        >
          {officialArticles.map((item) => (
            <CardScrollItem
              title={item.title}
              url={item.imgurl}
              onClick={() => handlerClickItem(item.id)}
              footer={
                <View>
                  <Image className="profile" src={item.avatar} />
                  <Text className="username">{item.createUserName}</Text>
                </View>
              }
              other={renderTags(item)}
            />
          ))}
        </CardScroll>
      </View>
      <Button className="next-btn" onClick={handlerClickCreate}>
        上传推荐
      </Button>
    </View>
  );
};

export default Discover;
